import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
	state = {isEnter:false}
	render() {
		const {id,name,done} = this.props
		const {isEnter} = this.state
		return (
			<li 
				onMouseEnter={this.handlerMouse(true)} 
				onMouseLeave={this.handlerMouse(false)} 
				// style={{backgroundColor:isEnter ? '#ddd' : 'white'}}
				className={ isEnter ? 'high-light' : ''}
			>
				<label>
					{/* 
						关于react中<input type="checkbox"的 checked属性和defaultChecked属性的使用原则：
							1.checked属性不能单独使用，时时刻刻起作用，必须配合onChange或disabled去使用，否则就会有错误提示
							2.defaultChecked只控制初次渲染是否勾选
					*/}
					<input type="checkbox" checked={done} onChange={this.update(id)}/>
					<span>{name}</span>
				</label>
				<button 
					className="btn btn-danger" 
					onClick={this.delete(id)} 
					style={{display:isEnter ? 'block' : 'none'}}
				>删除</button>
			</li>
		)
	}

	//响应鼠标移入移出
	handlerMouse = (flag)=>{
		return ()=>{
			this.setState({isEnter:flag})
		}
	}
	
	//更新一个todo
	update = (id)=>{
		return (e)=>{
			this.props.updateTodo(id,e.target.checked)
		}
	}

	delete = (id)=>{
		return ()=>{
			//eslint-disable-next-line
			if(confirm('确定删除吗？')){
				this.props.deleteTodo(id)
			}
		}
	}

}
